<template>
	<view class="bBtn_p_b140">
		<view class="contina w m_t_10">
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="100" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="上级部门" prop="form.parent_id" @click="openTree">
						<u--input v-model="form.parent.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择上级部门" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="部门名称" prop="form.name">
						<u--input v-model="form.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请填写部门名称" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom>
			<template #btn>
				<view class="flex_a_c" style="justify-content: space-around;">
					<view class="cale btns" @click="back">取消</view>
					<view class="save btns" @click="submit">保存</view>
				</view>
			</template>
		</flooterCom>
		<next-tree :selectParent="false" :checkStrictly="true" :multiple="false" ref="nextTreeAsyncRef"
			:treeData="asyncTreeData" @confirm="onconfirm" />
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				form: {
					name: '',
					parent_id: 0,
					corp_id: '',
					parent: {
						name:'',
					},
				},
				asyncTreeData: []
			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			this.form.corp_id = option.id
			if (this.edit == 1) {
				this.getDetail(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '编辑部门' : '新增部门'
			})
		},
		created() {
			this.$api.corpDeptApi.tree({corp_id:this.form.corp_id}).then(res=>{
				this.asyncTreeData = res
			})
		},
		methods: {
			openTree: function() {
				this.$refs.nextTreeAsyncRef.showTree = true
			},
			async getDetail(id) {
				this.form = await this.$api.corpDeptApi.detail({
					id: id
				})
			},
        onconfirm: function(list) {
            console.log('选中项的数量列表list：', list)
			this.form.parent.name = list[0]['label']
			this.form.parent_id = list[0]['id']
        },
			back() {
				uni.navigateBack()
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.corpDeptApi.update(this.form)
					} else {
						await this.$api.corpDeptApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	.contina {
		::v-deep .u-form-item__body {
			padding: 30rpx 0 !important;

			.u-form-item__body__right__content__slot {
				display: flex;
				align-items: flex-end;
			}

			text-align: right;

			.par_upload {
				width: 100rpx;
				height: 100rpx;

				.u-upload__button {
					width: 100rpx !important;
					height: 100rpx !important;
				}
			}
		}

		::v-deep .u-form-item__body__left__content__label {
			justify-content: space-between !important;
			width: 100%;
		}
	}

	.btns {
		width: 330rpx;
		height: 90rpx;
		border-radius: 10px 10px 10px 10px;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px 10px 10px 10px;
	}

	.cale {
		color: #FF0000;
		border: 1px solid #F07878;
	}

	.save {
		color: #fff;
		background-color: #0074FF;
	}
</style>